<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/css/base.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/font/font-awesome-4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/plug-in/swiper-4.3.3.min.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/css/mission-list.css" />
    <script src="/public/static/wx/plug-in/swiper-4.3.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/public/static/wx/js/flex.js" type="text/javascript" charset="utf-8"></script>
    <title>任务列表</title>

    <style>
        .state_name{
            font-size: 13px;
            background-color: green;
            color: #fff;
            display: inline-block;
            width: 100%;
            height: 100%;
            line-height: 21px;
            text-align: center;
            border-radius: 8px 0 0 8px;
        }
        .creat-list{
            display: flex;
            height: 30px;
            justify-content: center;
            align-content: center;
            margin-top: 7px;
        }
    </style>
</head>

<body>
<div class="index">
    <div class="top">
        <div class="top-banner clearfix">
            <div class="input-group" style="height: 35px;">
                <input type="text" name="" id="key" value="" placeholder="请输入编号或关键字" style="line-height: 34px;"/>
                <span onclick="sub()"></span>
            </div>
            <div class="creat-list">
                <a href="{:url('addDisUI')}" style="width: 100%;height: 100%"><img src="/public/static/wx/img/work-order-list/creat.png"/></a>
            </div>
        </div>
        <div class="select-list clearfix">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide select_bar select" val="0">全部<span></span></div>
                    <div class="swiper-slide select_bar " val="20">待处理<span></span></div>
                    <div class="swiper-slide select_bar" val="21">已接单<span></span></div>
                    <div class="swiper-slide select_bar" val="22">派单中<span></span></div>
                    <div class="swiper-slide select_bar" val="25">派人中</div>
                    <div class="swiper-slide select_bar" val="24">完成</div>
                    <div class="swiper-slide select_bar" val="23">拒单</div>

                </div>
            </div>
        </div>
    </div>
    <div class="order-list" id="dataList">
        <!--<div class="order-box clearfix">
            <div class="title-box clearfix">
                <p class="title">风电机器维修</p>
                <p class="time">编号：<i>20180702179117151</i></p>
            </div>
            <div class="content-box clearfix">
                <div class="left-icon">
                    <span class="fix"></span>
                    <span class="clock"></span>
                </div>
                <div class="word-box">
                    <p class="kind-title">故障类型：</p>
                    <p class="kind-des">风机的齿轮不动，请尽快解决一下</p>
                    <span></span>
                    <p class="time">2018-07-12 09:16:31</p>
                </div>
            </div>
            <div class="state">
                <img src="/public/static/wx/img/work-order-list/wait.png" alt="" />
            </div>
        </div>-->

    </div>
</div>
<script src="/public/static/wx/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/public/static/wx/plug-in/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 'auto',
        loodpedSlides: 10,
        spaceBetween: 1,
        //					freeMode:true

    });

    var tem = '';
    $('.select-list .select_bar').on('click',function(){
        $(this).siblings('.select_bar').removeClass('select');
        $(this).addClass('select');

        var val = $(this).attr('val');
        if(val=='0'){
            delete A_obj.state_id;
            delete A_obj.key;
        }else{
            A_obj.state_id = val;
        }

        if(val == tem){
            return;
        }
        $('#dataList').empty();
        tps_index = layer.load(0, {
            shade: [0.2,'#000'] //0.1透明度的白色背景
            ,offset:['45%','45%']
        });
        $.post(url,A_obj,call);
        tem = val;
    });

    var A_obj = {
        page:1,
        limit:10,
        per:2,
        /*state_id:20*/
    };

    var url = '{:url("queryDis")}';

    $('#dataList').empty();
    let tps_index = layer.load(0, {
        shade: [0.2,'#000'] //0.1透明度的白色背景
        ,offset:['45%','45%']
    });
    $.post(url,A_obj,call);


    function call(data) {
        layer.close(tps_index);
        A_obj.per = Math.ceil(data.count/A_obj.limit);

        var dom = $('<div class="order-box clearfix items" onclick="info(this)">\n' +
            '            <div class="title-box clearfix">\n' +
            '                <p class="title"></p>\n' +
            '                <p class="time">编号：<i class="number"></i></p>\n' +
            '            </div>\n' +
            '            <div class="content-box clearfix">\n' +
            '                <div class="left-icon">\n' +
            '                    <span class="fix"></span>\n' +
            '                    <span class="clock"></span>\n' +
            '                </div>\n' +
            '                <div class="word-box">\n' +
            '                    <p class="kind-title">故障类型：</p>\n' +
            '                    <p class="kind-des fault_name"></p>\n' +
            '                    <span></span>\n' +
            '                    <p class="time c_time"></p>\n' +
            '                </div>\n' +
            '            </div>\n' +
            '            <div class="state">\n' +
            '                <span class="state_name"></span>' +
            '            </div>\n' +
            '        </div>');

        $.each(data.data,function (k,v) {
            var ts = dom.clone();
            ts.find('.title').text(v.title);
            ts.find('.number').text(v.number);
            ts.find('.fault_name').text(v.fault_name);
            ts.find('.c_time').text(v.c_time);
            ts.find('.state_name').text(v.state_name);

            ts.attr('did',v.id);

            $('#dataList').append(ts);
        });

    }

    function info(_t){
        var id = $(_t).attr('did');
        location.href = '{:url("getDisUI")}?id='+id;
    }


    function sub(){
        var key = $('#key').val();

        A_obj.key = key;

        $.post(url,A_obj,call);
    }

    //滚动加载
    $(window).scroll(function () {

        if(A_obj.page < A_obj.per){

            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();

            if (scrollTop + windowHeight == scrollHeight ) {

                tps_index = layer.load(0, {
                    shade: [0.2,'#000'] //0.1透明度的白色背景
                    ,offset:['45%','45%']
                });
                A_obj.page++;
                $.post(url,A_obj,call);

            }
        }
    });
</script>
</body>

</html>